<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#000" size="50"></u-icon>
			<text>设备信息</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<view class="upload-join" @click="uploadImag()">
				<image :src="defaultUrl" style='border-radius:50%' mode=""></image>
				<view class="avartar">
					<image :src="imgsrc" style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode=""></image>
				</view>
			</view>
			<view class="admin-join">
				<text>宝宝名字</text>
				<input type="text" value="" placeholder="请输入" v-model='name' />
			</view>
			<view class="admin-join">
				<text>性别</text>
				<!-- <input type="text" value="" placeholder="(必填)" /> -->
				<picker @change="bindPickerChange" :range="array">
					<!-- <label>性别</label> -->
					<label class="">{{array[index]}}</label>
				</picker>
			</view>
			<view class="admin-join">
				<text>出生日期</text>
				<u-icon @click="calendarOptions.show= true" style="float: right;color: #909399;" name="calendar"
					size="45" color="#909399"></u-icon>
				<text style="float: right;color: #909399;font-size: 32rpx;"
					@click="calendarOptions.show= true">{{datatime}}</text>
			</view>
			<view class="admin-join">
				<text>身 高</text>
				<input value="" placeholder="请输入" v-model='height' type='number' />
				<text style="position: absolute; bottom: 20%; color: #909399;font-size: 32rpx;">cm</text>
			</view>
			<view class="admin-join">
				<text>体 重</text>
				<input value="" placeholder="请输入" type='number' v-model='weight' />
				<text style="position: absolute; bottom: 20%; color: #909399;font-size: 32rpx;">kg</text>
			</view>
			<view class="binding" @click="jump">
				确定
			</view>
		</view>
		<!-- 组件 -->

		<u-calendar v-model="calendarOptions.show" mode="date" @change="change"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				defaultUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
				calendarOptions: {
					show: false,
					mode: 'date'
				},
				height: 120,
				weight: 30,
				datatime: '2018-07-08',
				index: 0,
				array: ['男', '女'],
				imgsrc: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/camera.png',
				data: {}
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data))
			this.data = data
			this.name = data.name
			this.index = Number(data.sex)
			this.datatime = data.birthday
			this.height = data.height
			this.weight = data.weight
			console.log(data, 8877)

		},
		methods: {
			// 返回
			navigateBack() {
				uni.navigateTo({
					url: '../equipmentList'
				})
			},
			change(e) {
				console.log(e);
				this.datatime = e.result
			},
			confirm(e) {
				console.log(e);
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			async jump() {

				if (this.name === '') {
					uni.showModal({
						title: '设备修改',
						content: '请输入宝宝名字！'
					})
					return
				}
				let tpl_param = {
					// id:this.data.id,
					deviceCode: this.data.code,
					name: this.name,
					sex: this.index,
					height: this.height,
					weight: this.weight,
					birthday: this.datatime,
					// index: this.index,
					// icon: this.icon
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.editDeviceInfo(tpl_param);
				if (res.code == 200) {
					title: uni.showModal({
						title: '设备修改',
						content: '设备修改成功'
					});
					uni.reLaunch({
						url: '../equipmentList'
					})
				}
				else {
				uni.showToast({
					title:res.message
				})
				}

			},
			uploadImag() {
				uni.showActionSheet({
					itemList: ['查看头像', '从相册选择'],
					success: (res) => {
						let index = res.tapIndex;
						if (index == 0) {
							//查看头像
							var avatarArr = [];
							avatarArr.push(this.imgsrc)
							uni.previewImage({
								urls: avatarArr,
								current: avatarArr[0]
							})
						} else if (index == 1) {
							//选择头像上传
							uni.chooseImage({
								count: 1,
								sizeType: ["compressed"],
								sourceType: ["album"],
								success: (res) => {
									var filePath = res.tempFilePaths[0];
									//跳转相册选择组件
									uni.navigateTo({
										url: "upload/upload?tempFilePath=" + filePath
									})
								}
							})
						}
					}
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #000;
		background-color: #fff;
	}

	.navbar>text {
		font-size: 36rpx;
		padding-left: 200rpx;
		font-weight: bold;
	}

	// 内容
	.section {
		padding: 30rpx;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		margin-left: 240rpx;
	}

	.upload-join {
		position: relative;
	}

	.avartar {
		display: flex;
		align-items: center;
		margin: 30rpx;
		position: absolute;
		right: 32%;
		top: 56%;
	}

	.admin-join {
		border-bottom: rgb(238, 238, 238) solid 1rpx;
		font-size: 36rpx;
		padding: 30rpx;
		padding-top: 50rpx;
		position: relative;
		font-weight: bold;
	}

	.admin-join>picker {
		font-size: 32rpx;
		display: inline-block;
		float: right;
		width: 100rpx;
		color: #909399;
	}

	.binding {
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
		border-radius: 50rpx;
		text-align: center;
		margin-bottom: 35rpx;
		padding: 20rpx;
		font-size: 36rpx;
		background-color: rgb(68, 92, 223);
		color: #fff;
		margin-top: 100rpx;
	}

	input {
		font-size: 32rpx;
		display: inline-block;
		float: right;
		width: 100rpx;
		color: #909399;
	}
</style>
